<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS样式</title>
		<!-- html中元素自带属性和属性值 做单个元素效果
		 css样式表 整个或单个元素效果
		 使用css--1.引入css3样式【4种】
		            1.1内联样式表  不建议使用 没有实现内容与表现分离
					1.2内部样式表  练习专用
					  1.2.1 使用方式--head元素 添加style元素
					  1.2.2 编写css语法  选择器--元素选择器：抓取页面元素
					1.3外部样式表  项目专用
					  1.3.1使用方式--head元素 添加link元素 指定css文件
					  1.3.2创建xxx.css文件
					1.4引入样式表  不用，致命bug
					  1.4.1使用--head元素  添加style元素
					  1.4.2创建xxx.css文件
					  1.4.3在style元素中加@import（xxx.css）
					  缺点：项目内容大，先执行结构执行出来，等一会，效果加不上
					       先执行效果css，然后再执行结构html
		          2.编写css3语法：css属性和属性值使用
				  
-->
 <style>
	 @import url(css/引入样式表.css);
	 /* css3注释*/
	 p{
		 /* css3属性和属性值：添加【样式】效果*/
		 /* 效果：居中*/
		 text-align:center;
		 /* 效果：背景颜色  色值：十六进制  网页三原色：红绿蓝*/
		 background-color:#e4393c;/* 京东红 主题色 */
		 /* 效果：文本放大*/
		 font-size:50px;
		 /* 效果：宽高*/
		 width: 249px;
		 height: 249px;
		 /* 效果：行高与高度一致  垂直居中*/
		 line-height: 249px;
	 }
 </style>
	<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<!-- html效果 -->
		<p>lorem1</p>
		<!-- css效果 -->
		<p>lorem2</p>
		<span>行元素内容</span>
	</body>
</html>
